<template>
  <div>
    <el-form
      :model="query"
      inline
      label-width="auto"
      label-suffix="："
      size="small"
    >
      <el-row :gutter="8">
        <el-col :span="5">
          <el-form-item label="实收单号" prop="code">
            <el-input v-model="query.code" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="业务编号" prop="workdoccode">
            <el-input v-model="query.workdoccode" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="业务员" prop="salesId">
            <selectDown v-model:modelData="query.salesId" selectKey="salesId" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="单位名称" prop="entFullname">
            <selectDown
              v-model:model-data="query.entFullname"
              selectKey="entFullname"
            >
            </selectDown>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态" prop="status">
            <el-select v-model="query.status">
              <el-option :value="99" label="全部" />
              <el-option :value="0" label="未销" />
              <el-option :value="1" label="已销" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="5">
          <el-form-item label="币种" prop="currency">
            <selectDown
              v-model:model-data="query.currency"
              selectKey="currency"
            >
            </selectDown>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="收款日期" prop="docdate">
            <el-date-picker
              v-model="query.docdate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="发票号" prop="invoiceCode">
            <el-input v-model="query.invoiceCode"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="备注" prop="memo">
            <el-input v-model="query.memo"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="金额">
            <div class="input-box">
              <el-input
                v-model="query.price1"
                @blur="blurFormatNum('price1')"
                class="in-box"
              />
              <span class="middle-box"> ~ </span>

              <el-input
                v-model="query.price2"
                @blur="blurFormatNum('price2')"
                class="in-box"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" @click="search"> 搜索 </el-button>
        <el-button @click="reset"> 重置 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import selectDown from "./selectDown.vue";
import { formatNum } from "@/utils/format.ts";
export default defineComponent({
  components: {
    selectDown,
  },
  props: {},
  emits: ["search", "reset"],
  data() {
    return {
      query: {
        code: undefined, //实收单号
        workdoccode: undefined, //业务单号
        salesId: undefined, //业务员
        entFullname: undefined, //单位名称
        currency: undefined, //币种
        invoiceCode: undefined, //发票号
        docdate: [], // 收款日期
        status: 99, // 开票状态
        memo: undefined,
        price1: undefined,
        price2: undefined,
      },
    };
  },
  methods: {
    blurFormatNum(field) {
      if (field === "price1") {
        this.formState.price1 = formatNum(this.formState.price1, 2, 0, null);
      }
      if (field === "price2") {
        this.formState.price2 = formatNum(this.formState.price2, 2, 0, null);
      }
      if (
        this.formState.price1 &&
        this.formState.price2 &&
        this.formState.price1 >= this.formState.price2
      ) {
        this.formState.price2 = this.formState.price1 + 1;
      }
    },
    search() {
      this.$emit("search", this.query);
    },
    reset() {
      this.query = {
        code: undefined, //实收单号
        workdoccode: undefined, //业务单号
        salesId: undefined, //业务员
        entFullname: undefined, //单位名称
        currency: undefined, //币种
        invoiceCode: undefined, //发票号
        docdate: [], // 收款日期
        status: 99, // 开票状态
        memo: undefined,
        price1: undefined,
        price2: undefined,
      };
      this.$emit("reset", this.query);
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
:deep(.el-form) {
  .el-form-item {
    width: 100%;
    margin: 0;
    .el-form-item__label {
      font-size: 12px;
    }
  }
}
:deep(.el-row) {
  margin-bottom: 8px;
  padding-right: 16px;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-date-editor) {
  width: 100%;
}

.input-box {
  display: flex;
  .in-box {
    flex: 1;
  }

  .middle-box {
    margin: 0 8px;
  }
}
</style>
